<template>
  <div>
    <h1>App</h1>
    <p>{{ fullName }}</p>
    <button @click="fullName = '静 香'">修改名字</button>
  </div>
</template>

<script lang="ts">
 import { defineComponent } from "vue"
  export default  defineComponent({
    name:'App',
    });
</script>

<script setup lang="ts">
import { ref ,computed } from "vue";
const firstName = ref("胖");
const lastName = ref("虎");

// 书写一个只读计算属性
// const fullName = computed(()=>{
//   return firstName.value + "" + lastName.value
// })

// 书写一个可读可写的计算属性
const fullName = computed({
  get() {
    return firstName.value + " " + lastName.value
  },
  set(newVal){
    firstName.value = newVal.split(" ")[0];
    lastName.value = newVal.split(" ")[1];
  },
});

</script>

<style lang="less" scoped>
  
</style>
